<template>
  <div>
    <nav>
      <el-menu class="el-menu-demo" mode="horizontal" background-color="#000000" text-color="#fff" active-text-color="#FFFFFF">
        <div class="mylogocon">
          <img src="../assets/lunbo/logo.png" class="mylogo">
        </div>
        <el-menu-item index="1" @click="gothismoudule">首页</el-menu-item>
        <el-menu-item index="2" @click="gothismoudule">店铺推荐</el-menu-item>
        <el-menu-item index="3" @click="gothismoudule">精致食谱</el-menu-item>
        <el-menu-item index="4" @click="gothismoudule">美食论坛</el-menu-item>
        <el-menu-item index="5" @click="gothismoudule">优质食材</el-menu-item>
        <el-menu-item index="6"  class="tabinputcon">
          <el-input placeholder="请输入内容"  prefix-icon="el-icon-search" class="tabinput"> </el-input>
        </el-menu-item>
        <el-menu-item index="8" :style="{float:rightmenu}" class="hoverstyle" @click="gothismoudule">注册</el-menu-item>
        <!--<el-menu-item index="9" :style="{float:rightmenu}" @click="gothismoudule">{{loginmes}}</el-menu-item>-->
        <el-menu-item index="7" :style="{float:rightmenu}" class="hoverstyle" :default-active="activeIndex2"  @select="handleSelect" @click="gothismoudule">
        <el-submenu index="2">
            <template slot="title">{{loginmes}}</template>
             <el-menu-item index="2-1" @click="gotomymessage"><i class="el-icon-location"></i>个人主页</el-menu-item>
             <el-menu-item index="2-2"><i class="el-icon-sold-out"></i>购物车</el-menu-item>
             <el-menu-item index="2-3"><i class="el-icon-bell"></i>消息提示</el-menu-item>
             <el-menu-item index="2-4"><i class="el-icon-circle-close-outline"></i>退出</el-menu-item>
        </el-submenu></el-menu-item>
      </el-menu>
    </nav>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        rightmenu: 'right',
        activeIndex: '1',
        activeIndex2: '1',
        name:''

      }
    },
    computed:{
      loginmes(){
        return this.$store.state.loginmes;
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      gothismoudule:function(event){
        //var el=event.currentTarget;//获取当前元素
        var el=event.index;
        var self=this;
        console.log(el);
        if(el==1){
          self.$router.push("/home");
        }
        if(el==2){
          self.$router.push("/home/foodrecommend");
        }
        if(el==3){
          self.$router.push("/home/cookbook");
        }
        if(el==4){
          self.$router.push("/home/foodBBS");
        }
        if(el==5){
          self.$router.push("/home/basefood");
        }
        if(el==8){
          self.$router.push("/home/frontres");
        }
        if(el==7){
          self.$router.push("/home/frontlogin");
        }
        //console.log(this.$refs);
      },
      gotomymessage:function(){
        this.$router.replace({path:'/home/user'})
      }
    }
  }
</script>

<style scoped>
  @import "../css/myhead.css";
</style>
